<template>
	<view class="order-detail">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="back-icon" @click="goBack">
				<image src="/static/index/returnIcon.png" mode="widthFix" class="back-icon-box"></image>
			</view>
			<view class="title">订单详情</view>
		</view>
		<view class="detail-content">
			<!-- 药品信息 -->
			<view class="section">
				<view class="section-title">药品信息</view>
				<view class="info-list" v-for="(item,index) in orderDetail.subOrderList" :key="item.id">
					<view class="info-item">
						<text class="label" style="color: #000;font-weight: 600;">药品{{ index +1}}</text>
					</view>
					<view class="info-item">
						<text class="label">药品名称</text>
						<text class="value">{{ item.medicineVo.medicineName ||'-' }}</text>
					</view>

					<view class="info-item">
						<text class="label">规格</text>
						<text class="value">{{ item.medicineVo.medicineSpecifications || '-' }}</text>
					</view>
					<view class="info-item">
						<text class="label">厂家</text>
						<text class="value">{{ item.medicineVo.manufacturer || '-' }}</text>
					</view>
					<view class="info-item" style="display:block;">
						<view class="label" style="font-weight: 600;display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;margin-top: 10rpx;">
							<view>
								柜机名称
							</view>
							<view>
								数量
							</view>
						</view>
						<view class="value"
							style="display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;margin-top: 10rpx;"
							v-for="(item,index) in item.retrieveDetailsVos" :key="index">
							<view>{{ item.cabinetName ||'-' }}</view>
							<view>x{{ item.num ||0 }}</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 订单信息 -->
			<view class="section">
				<view class="section-title">订单信息</view>
				<view class="info-list">
					<view class="info-item">
						<text class="label">订单号码</text>
						<view class="value-wrap">
							<text class="value">{{orderDetail.id||'-'}}</text>
							<text class="copy-btn" @click="handleCopy(orderDetail.id)">复制</text>
						</view>
					</view>
					<view class="info-item">
						<text class="label">下单时间</text>
						<text class="value">{{orderDetail.orderTime||'-'}}</text>
					</view>
					<view class="info-item">
						<text class="label">配送费</text>
						<text class="value">¥{{orderDetail.fee||'0'}}</text>
					</view>
					<view class="info-item">
						<text class="label">优惠</text>
						<text class="value discount">-¥{{orderDetail.fee||'0'}}</text>
					</view>
					<view class="info-item">
						<text class="label">实付款</text>
						<text class="value">¥{{orderDetail.amount||'0'}}</text>
					</view>
				</view>
			</view>

			<!-- 收件人信息 -->
			<view class="section">
				<view class="section-title">
					<view> 收件人信息 </view>
					<view class="phone-icon" @click="callPhone(orderDetail.phoneNumber)">
						<image src="/static/index/phone.png" mode="widthFix" class="phone-icon-img">
						</image>
					</view>
				</view>
				<view class="info-list">
					<view class="info-item">
						<text class="label">姓名</text>
						<text class="value">{{orderDetail.orderingUser||'-'}}</text>
					</view>
					<view class="info-item">
						<text class="label">手机号码</text>
						<text class="value">{{formatPhoneNumber(orderDetail.phoneNumber)}}</text>
					</view>
					<view class="info-item">
						<text class="label">地址</text>
						<text class="value">{{orderDetail.address||'-'}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		getorderDetail
	} from '@/api/index.js'
	import {
		onLoad,
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";


	const orderDetail = ref({})

	onLoad((options) => {
		getorderDetail(options?.id).then(res => {
			orderDetail.value = res.data
		})
	})
	const goBack = () => {
		uni.navigateBack()
	}
	const callPhone = (phone) => {
		console.log(phone, '--------orderDetail.value.phoneNumber')
		uni.makePhoneCall({
			phoneNumber: String(phone)
		})
	}
	// 复制
	const handleCopy = (text) => {
		uni.setClipboardData({
			data: text,
			success: () => {
				uni.showToast({
					title: '复制成功',
					icon: 'success'
				})
			}
		})
	}

	// 处理手机号码中间4位隐藏
	const formatPhoneNumber = (phone) => {
		if (!phone) return ''
		return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
	}
</script>

<style lang="scss" scoped>
	.order-detail {
		min-height: 100vh;
		background: #C0E5F8;

		.header {
			height: 88rpx;
			background: #fff;
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			position: relative;

			.back-icon {
				font-size: 40rpx;
				color: #333;
			}

			.title {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				font-size: 32rpx;
				font-weight: 500;
			}
		}

		.header {
			height: 148rpx;
			background: #C0E5F8;
			display: flex;
			align-items: center;
			padding: 50rpx 30rpx 0;
			position: relative;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 100;

			.back-icon {
				.back-icon-box {
					width: 16rpx;
					height: 16rpx;
				}
			}

			.title {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				font-size: 32rpx;
				font-weight: 500;
				color: #333;
			}

			.search-icon {
				position: absolute;
				right: 30rpx;

				.search-icon-box {
					width: 32rpx;
					height: 36rpx;
				}
			}
		}

		.detail-content {
			padding: 20rpx;
			padding-top: 200rpx;

			.section {
				background: #fff;
				border-radius: 12rpx;
				padding: 30rpx;
				margin-bottom: 20rpx;

				.section-title {

					font-size: 30rpx;
					font-weight: 600;
					color: #111827;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-bottom: 20rpx;
					border-bottom: 1px solid #F3F3F3;

					.phone-icon {
						width: 40rpx;
						height: 40rpx;
						border: 1rpx solid #cacaca;
						border-radius: 50%;
						padding: 6rpx;
						text-align: center;

						.phone-icon-img {
							width: 22rpx;
							height: 22rpx;
						}
					}
				}

				.info-list {
					margin-top: 20rpx;

					.info-item {
						display: flex;
						justify-content: space-between;
						margin-bottom: 16rpx;
						font-size: 28rpx;
						line-height: 40rpx;
						color: #6B7280;

						&:last-child {
							margin-bottom: 0;
						}

						.value {
							text-align: right;
						}

						.value-wrap {
							display: flex;
							align-items: center;

							.value {
								color: #111827;
								border-right: 1rpx solid #b4b2b2;
								padding-right: 10rpx;
							}

							.copy-btn {
								color: #1890ff;
								margin-left: 10rpx;
								font-size: 26rpx;
							}
						}

						.discount {
							color: #F97316;
						}
					}
				}
			}
		}
	}
</style>